<!--用于播放音频的播放器。利用 Vue 3 的 Composition API 和 Vuex 来管理音频播放的状态和属性。-->
<template>
  <audio :src="attachImageUrl(songUrl)"
         controls="controls" :ref="player"
         preload="true" @canplay="canplay"
         @timeupdate="timeupdate" @ended="ended">
    <!--:src="attachImageUrl(songUrl)" // 绑定音频源，使用 attachImageUrl 方法处理 songUrl
    controls="controls" // 显示音频控件（播放/暂停/进度条/音量）
    :ref="player" // 将音频元素的引用赋给 player 函数
    preload="true" // 在页面加载时预加载音频
    @canplay="canplay" // 当音频可以播放时触发 canplay 方法
    @timeupdate="timeupdate" // 当播放位置更新时触发 timeupdate 方法
    @ended="ended" // 当音频播放结束时触发 ended 方法-->
  </audio>
</template>

<script lang="ts">
import {defineComponent, ref, getCurrentInstance, computed, watch} from "vue";
import {useStore} from "vuex";
import {HttpManager} from "@/api";

export default defineComponent({
  setup() {

    const {proxy} = getCurrentInstance();// 获取当前组件的实例
    const store = useStore();// 使用 Vuex store
    const divRef = ref<HTMLAudioElement>();// 创建一个引用，指向 HTMLAudioElement 元素
    const player = (el) => {
      divRef.value = el;// 将传入的元素赋值给 divRef
    };

    const muted = ref(true); // 添加一个 reactive 的 muted 属性，用于控制是否静音
    const audioDom = document.querySelector('audio');// 获取页面中的第一个 audio 元素
    if (audioDom) {
      // 设置为静音并尝试自动播放
      audioDom.muted = true;
      audioDom.play()
          .then(() => {
            // 自动播放成功
          })
          .catch(error => {
            // 自动播放失败，可能是因为没有用户交互
            console.error('自动播放失败，需要用户交互。', error);
          });
    }


    const songUrl = computed(() => store.getters.songUrl); // 音乐链接
    const isPlay = computed(() => store.getters.isPlay); // 播放状态
    const volume = computed(() => store.getters.volume); // 音量
    const changeTime = computed(() => store.getters.changeTime); // 指定播放时刻
    const autoNext = computed(() => store.getters.autoNext); // 用于触发自动播放下一首
    // 监听播放还是暂停
    watch(isPlay, () => togglePlay());
    // 监听指定播放时刻的变化
    watch(changeTime, () => (divRef.value.currentTime = changeTime.value));
    // 监听音量的变化
    watch(volume, (value) => (divRef.value.volume = value));

    // 开始 / 暂停
    function togglePlay() {
      // 根据 isPlay 的值决定播放或暂停
      isPlay.value ? divRef.value.play() : divRef.value.pause();
    }

    // 获取歌曲链接后准备播放
    function canplay() {
      //  记录音乐时长到 Vuex store
      proxy.$store.commit("setDuration", divRef.value.duration);
      //  如果音频是静音状态，则取消静音并更新状态
      if (muted.value) {
        divRef.value.muted = false;
        muted.value = false;
      }
      // 更新播放状态到 Vuex store
      proxy.$store.commit("setIsPlay", true);
    }

    // 音乐播放时记录音乐的播放位置
    function timeupdate() {
      proxy.$store.commit("setCurTime", divRef.value.currentTime);
    }

    // 音乐播放结束时触发
    function ended() {
      // 更新播放状态和当前时间到 Vuex store
      proxy.$store.commit("setIsPlay", false);
      proxy.$store.commit("setCurTime", 0);
      // 根据 autoNext 的状态触发自动播放下一首
      proxy.$store.commit("setAutoNext", !autoNext.value);
    }


    return {
      songUrl,
      player,
      canplay,
      timeupdate,
      ended,
      muted,
      attachImageUrl: HttpManager.attachImageUrl,// 处理音频源 URL 的方法
    };
  },
});
</script>

<style scoped>
audio {
  display: none; /*隐藏音频控件*/
}
</style>
